/*页面切换动画*/

/*淡出放大动画*/
.fadeScale-enter-active{
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    transition: all .4s linear;
    >div {
        -webkit-animation: fadeIn .6s linear 1;
        animation: fadeIn .6s linear 1;
    }
}
.fadeScale-leave-active{
    opacity: 0;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    transition: all .4s linear;
    >div {
        -webkit-animation: fadeOut .6s linear 1;
        animation: fadeOut .6s linear 1;
    }
}
.fadeScale-enter{
    opacity: 0;
}

/*淡入淡出过渡*/
.fade-enter-active{
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition: all .3s linear;
}
.fade-leave-active{
    opacity: 0;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition: all .3s linear;
}
.fade-enter{
    opacity: 0;
}

//左右滑动过渡
.slide-fade-enter-active{
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition: all .3s linear;
}
.slide-fade-leave-active{
    opacity: 0;
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    transform: translateX(10%);
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition: all .3s linear;
}
.slide-fade-enter{
    opacity: 0;
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    transform: translateX(10%);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        -webkit-transform: scale(0) translate(-50%, -50%);
        -moz-transform: scale(0) translate(-50%, -50%);
        transform: scale(0) translate(-50%, -50%);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1) translate(-50%, -50%);
        -moz-transform: scale(1) translate(-50%, -50%);
        transform: scale(1) translate(-50%, -50%);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        -webkit-transform: scale(1) translate(-50%, -50%);
        -moz-transform: scale(1) translate(-50%, -50%);
        transform: scale(1) translate(-50%, -50%);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0) translate(-50%, -50%);
        -moz-transform: scale(0) translate(-50%, -50%);
        transform: scale(0) translate(-50%, -50%);
    }
}